<template>
  <transition name="slide-fade">
    <div style="height: 100%">
      <img src="../assets/imgs/indexBg1.jpg" alt="">
      <div class="formBox">
        <el-form :rules="rules" :model="{room_id,password}">
          <el-header>查找房间</el-header>
          <el-form-item prop="room_id">
            <el-input placeholder="请输入房间号" type="number" v-model="room_id">
              <template slot="prepend">房号</template>
            </el-input>
            <!--<el-form-item label="玩家人数">-->
            <!--<el-input-number v-model="user.players" @change="handleChange" :min="3" :max="10" label="描述文字">-->
            <!--<template slot="prepend">玩家人数</template>-->
            <!--</el-input-number>-->
            <!--</el-form-item>-->
          </el-form-item>
          <el-form-item prop="password">
            <el-input placeholder="请输入房间密码" type="number" v-model="password">
              <template slot="prepend">密码</template>
            </el-input>
          </el-form-item>
        </el-form>
        <div class="create">
          <el-button class="el-button el-button--success" @click="toPage('gamehome')">
            进入房间
          </el-button>
        </div>
      </div>

    </div>
  </transition>
</template>

<script>
  export default {
    name: 'search',
    data:()=>({
      room_id:'',
      password:'',
      rules: {
        room_id:[{ required: true, validator: (rule, value, callback) => {
            if(!value){callback('房间号不能为空')}
          } , trigger: 'blur' }],
        password:[{ required: true, validator: (rule, value, callback) => {
            if(!value){callback('密码不能为空')}
          } , trigger: 'blur' }],
      }
    }),
    mounted(){
      if (window.history && window.history.pushState) {
        window.addEventListener('popstate', this.goBack, false);
      }
    },
    methods: {
      goBack(){
        window.localStorage.removeItem('room_id')
      },
      toPage (page) {
        if(this.room_id == ''){
          this.$message('兄弟，房间号咧？？？？')
          return false
        }
        if(this.password == ''){
          this.$message({
            message:'没有密码是进不去的',
            type: 'error'
          })
          return false
        }
        this.$axios.post(this.urlList.authUrl + '/api/game/join_room',{
          token:window.localStorage.getItem('token'),
          room_id:this.room_id,
          pwd:this.password
        } ).then((res)=>{
          if(res.data.error == 200){
            this.$router.push({name: page,params:{room_id:this.room_id,player_id:res.data.data.player_id}})
          }else if(res.data.error == 502){
            // alert('您已经在'+res.data.data.room_id+'房间中')
            this.$router.push({name: page,params:{room_id:res.data.data.room_id,player_id:res.data.data.player_id}})
          }else{
            this.$message({
              message:res.data.message,
              type: 'error'
            })
          }
        })
      }
    },
    created(){
      if(window.localStorage.getItem('room_id') && window.localStorage.getItem('pwd')){
        this.room_id = window.localStorage.getItem('room_id')
        this.password = window.localStorage.getItem('pwd')
        this.toPage('gamehome')

      }
    },
    destroyed(){
      window.localStorage.removeItem('pwd')
    }
  }
</script>

<style scoped>
img{position:absolute;width: 100%;height: 100%}
.back{
  float: left;
  padding: 10px 16px;
  background: #dfe4ed;
  border-radius: 4px;
}
.formBox{
  position: absolute;
  width: 80%;
  top: 0;
  left: 50%;
  margin-left: -40%;
}
.el-header{
  line-height: 60px;
  text-align: center;
  color: #f1f1f1;
}
.create{
  width: 100%;
  font-weight: 700;
  margin-top: 40px;
  text-align: center;
}
.el-form-item__label{
  color: #fff;
}
.el-checkbox__label{
  color: #f1f1f1;
  text-shadow:0px 2px 2px #666;
}
.slide-fade{
  position: absolute;left:0;right: 0;
}
.slide-fade-enter-active {
  transition: all 0.8s ease;
}
.slide-fade-leave-active {

  transition: all .1s cubic-bezier(2.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
{
  left:0;right: 0;
  transform: translateY(-250px);
  opacity: 0;
}
.transition-box {
  margin: auto;
  margin-bottom: 10px;
  width: 200px;
  border-radius: 4px;
  background-color: #409EFF;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
}
</style>
